<template>
  <div class="cart">
<!--    导航-->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{length}})</div>
    </nav-bar>
<!--    商品列表-->
    <cart-list></cart-list>
<!--    底部汇总-->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import CartList from "@/views/cart/childComps/CartList";
  import CartBottomBar from "@/views/cart/childComps/CartBottomBar";

  import {mapGetters} from 'vuex'


  export default {
    name: "Cart",
    components:{
      CartBottomBar,
      NavBar,
      CartList,

    },
    computed:{
      // 购物车商品数
      //1.使用对象展开运算符将getter混入computed对象中
      // ...mapGetters([
      //   'cartLength',
      //   'cartList'
      // ]),
      //2.如果想将getter属性取另一个名字，使用对象形式
      ...mapGetters({
        length:'cartLength',
      })
    }

  }
</script>

<style scoped>
.cart {
  /*position: relative;*/
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

/*.cart-list {*/
/*  position: absolute;*/
/*  top: 44px;*/
/*  bottom: 49px;*/
/*  width: 100%;*/
/*}*/
</style>
